@import "../common.scss";

body {
	background-color: #fff;
}

.mui-table-view::after,
.mui-table-view::before {
  background-color: #eee; }

.mui-table-view-cell:after {
  background-color: #eee; }

.app{
	position: absolute;
	top: 0;
	bottom: ws(48);
	left: 0;
	right: 0;
}

.content {
	.item {
		padding: ws(15);
		.unser {
			display: flex;
			align-items: center;
			padding-bottom: ws(15);
			@include border-line(#e4e1e1, bottom);
			.item-portrait {
				width: ws(35);
				height: ws(35);
				border-radius: 50%;
				overflow: hidden;
				>img {
					width: 100%;
					height: 100%;
				}
			}
			.user-name {
				font-size: ws(15);
				color: #414141;
				font-weight: bold;
				margin-left: ws(10);
			}
		}
		.desc {
			margin-top: ws(15);
			.desc-time {
				font-size: ws(12);
			}
			.desc-text {
				line-height: ws(38/2);
			}

			.desc-image {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				>img {
					object-fit: cover;
				}
				.image {
					width: ws(167);
					height: ws(120);
					margin-bottom: ws(10);
				}
			}
			.warpper {
				display: flex;
				justify-content: space-between;
				.operation-warpper {
					display: flex;
					font-size: ws(15);
					color: #7f7f7f;
					>div {
						display: flex;
						align-items: center;
						img {
							width: ws(17);
							margin-right: ws(3);
							margin-bottom: ws(1);
						}
					}

					.like {
						margin-left: ws(30);
						img {
							width: ws(19);
							margin-bottom: ws(3);
						}
					}
				}
			}
		}
	}
	.highlight{
		height: ws(10);
		background-color: #eee;
	}
	.comment{
		padding-bottom: ws(100);
		.mui-table-view-cell{
			padding: ws(15);
			display: flex;
			align-items: flex-start;
			.img{
				width: ws(35);
				height: ws(35);
				border-radius: 50%;
				overflow: hidden;
				>img {
					width: 100%;
					height: 100%;
				}
			}
			.comment-desc{
				flex: 1;
				margin-left: ws(10);
				.info{
					display: flex;
					justify-content: space-between;
					font-size: ws(15);
					color: #000;
				}
				.text{
					line-height: ws(38/2);
				}
			}
		}
	}
}

.bottom-textarea {
	position: absolute;
	width: 100%;
	height: ws(48);
	display: flex;
	align-items: center;
	padding: 0 ws(10);
	box-shadow: 0 0 ws(1) #bbb;
	background-color: #fff;
	z-index: 10;
	.textarea {
		flex: 1;
		height: ws(38);
		margin-bottom: 0;
		border: unset;
		background-color: #eee;
		font-size: ws(14);
		line-height: ws(18);
		border-radius: ws(5);
		padding: 0 ws(15);
		padding-top: ws(12);
	}
	.send {
		width: ws(50);
		height: ws(48);
		padding-right: ws(5);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
